import HeaderPage from '@/components/HeaderPage';
import React, { useState, useEffect } from 'react';
import { Form, Radio, Input, Button, Upload } from 'antd';
import Voice from './voice';
import PicturesWall from './picturesWall';
import Map from './map';
import { UploadOutlined, InboxOutlined } from '@ant-design/icons';
import axios from 'axios';

export default function User() {
  // 灾情集合
  const [disaster] = useState([
    '洪灾',
    '地震',
    '山体滑坡/泥石流',
    '火灾',
    '踩踏事故',
    '干旱缺水',
    '中毒',
    '其他',
  ]);
  // 事件描述
  const [event] = useState([
    '人员受伤',
    '人员失联',
    '人员被困/遇险',
    '物资短缺',
    '缺少住处',
    '迷失方向',
    '其他',
  ]);
  const Enum = {
    '1': [
      '洪灾',
      '地震',
      '山体滑坡/泥石流',
      '火灾',
      '踩踏事故',
      '干旱缺水',
      '中毒',
      '其他',
    ],
    '2': [
      '人员受伤',
      '人员失联',
      '人员被困/遇险',
      '物资短缺',
      '缺少住处',
      '迷失方向',
      '其他',
    ],
  };
  // 最终表单
  const [form, setForm] = useState({});
  // 副作用
  useEffect(() => {
    console.log(form);
    var axios = require('axios');
    var data = JSON.stringify({});

    var config = {
      method: 'post',
      url: 'api1/hello/userhelp',
      headers: {
        'Content-Type': 'application/json',
      },
      data: form,
    };

    axios(config)
      .then(function (response) {
        console.log(JSON.stringify(response.data));
      })
      .catch(function (error) {
        console.log(error);
      });
  }, [form]);

  const handleFinish = (value) => {
    setForm(value);
  };
  const onReset = () => {
    form.resetFields();
  };

  const normFile = (e: any) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  const domRender = (label, name, type) => {
    return (
      <Form.Item label={label} name={name}>
        <Radio.Group>
          {Enum[type].map((item) => (
            <Radio key={item} value={item}>
              {item}
            </Radio>
          ))}
        </Radio.Group>
      </Form.Item>
    );
  };
  return (
    <div className="user_page">
      <HeaderPage></HeaderPage>
      <Form name="basic" onFinish={handleFinish}>
        <Form.Item label="求助人：" name="seek">
          <Radio.Group>
            <Radio value="我自己">我自己</Radio>
            <Radio value="异地家人/朋友">异地家人/朋友</Radio>
            <Radio value="其他">其他</Radio>
          </Radio.Group>
        </Form.Item>
        <Map />
        <Form.Item label="详细地址：" name="address">
          <Input placeholder="请输入详细地址" />
        </Form.Item>
        {domRender('灾情概述：', 'disaster', '1')}
        {domRender('事件描述：', 'event', '2')}
        <Form.Item label="自定义事件：" name="customEvent">
          <Input.TextArea maxLength={100} />
        </Form.Item>
        {/* <Form.Item label="点击录音：" name="sound" >
        <Voice />
      </Form.Item> */}
        <Form.Item
          name="upload"
          label="上传照片:"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload name="logo" action="/upload.do" listType="picture">
            <Button icon={<UploadOutlined />}>Click to upload</Button>
          </Upload>
        </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit">
            提交
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
}
